<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>grid</title>
    <link rel="stylesheet" href="../../dist/seedsui.min.css">
    <style>
    .grid{
    	background-color: white;
    }
    /*=========== 图片上传 ===========*/
    .app-grid-photo li{
	    padding: 6px;
	}
	.app-grid-photo .grid-icon{
	    height: 90px;
	    width: 100%;
	    border:1px solid #e5e5e5;
	    background-color: white;
	    background-size: cover;
	    color: #e5e5e5;
	}
	.app-grid-photo .app-grid-icon-add{
		border:1px dashed #A6A6A6;
	}
	.app-grid-photo .close{
		position: absolute;
		top:-6px;
		left:-6px;
		background-color: #FF6A54
	}
	.app-grid-photo .icon{
	    pointer-events:none;
	}
	/*=========== 缩略图 ===========*/
	.app-grid-thumbnail li{
		padding: 10px 12px;
	}
	.app-grid-thumbnail .grid-icon{
		border:1px solid #e5e5e5;
	}
    </style>
</head>

<body ontouchstart="">
	<header>
	    <div class="titlebar">
	        <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
	        <h1 class="titlebar-title">Grid栅格化</h1>
	    </div>
	</header>
	<article>
		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">应用图标</p>
		</div>
		<ul class="grid" data-col="3">
			<li>
				<a class="grid-icon size50 bg-1">
					<i class="icon icon-contact-fill size30"></i>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label class="grid-label">通讯录</label>
			</li>
			<li>
				<a class="grid-icon size50 bg-2">
					<i class="icon icon-write-fill size30"></i>
					<span class="badge" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label class="grid-label">审批</label>
			</li>
			<li>
				<a class="grid-icon size50 bg-3">
					<i class="icon icon-position-fill size30"></i>
				</a>
				<label class="grid-label">定位</label>
			</li>
			<li>
				<a class="grid-icon size50 bg-4">
					<i class="icon icon-gear-fill size30"></i>
				</a>
				<label class="grid-label">设置</label>
			</li>
			<li>
				<a class="grid-icon size50 bg-5">
					<i class="icon icon-folder-fill size30"></i>
				</a>
				<label class="grid-label">文档</label>
			</li>
			<li>
				<a class="grid-icon size50 bg-6">
					<i class="icon icon-chartpie-fill size30"></i>
				</a>
				<label class="grid-label">数据分析</label>
			</li>
		</ul>
		</div>

		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">应用图标-bordered</p>
		</div>
		<ul class="grid grid-bordered" data-col="3">
			<li>
				<a class="grid-icon size54 bordered color-body" style="border-radius:100%">
					<i class="icon icon-contact-fill size30"></i>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label class="grid-label">通讯录</label>
			</li>
			<li>
				<a class="grid-icon size54 bordered color-body" style="border-radius:100%">
					<i class="icon icon-write-fill size30"></i>
				</a>
				<label class="grid-label">审批</label>
			</li>
			<li>
				<a class="grid-icon size54 bordered color-body" style="border-radius:100%">
					<i class="icon icon-position-fill size30"></i>
				</a>
				<label class="grid-label">定位</label>
			</li>
			<li>
				<a class="grid-icon size54 bordered color-body" style="border-radius:100%">
					<i class="icon icon-gear-fill size30"></i>
				</a>
				<label class="grid-label">设置</label>
			</li>
			<li>
				<a class="grid-icon size54 bordered color-body" style="border-radius:100%">
					<i class="icon icon-folder-fill size30"></i>
				</a>
				<label class="grid-label">文档</label>
			</li>
			<li>
				<a class="grid-icon size54 bordered color-body" style="border-radius:100%">
					<i class="icon icon-chartpie-fill size30"></i>
				</a>
				<label class="grid-label">数据分析</label>
			</li>
		</ul>
		</div>

		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">裸图标</p>
		</div>
		<ul class="grid" data-col="3">
			<li>
				<a class="grid-icon color-1 size32">
					<i class="icon icon-contact-fill size32"></i>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label class="grid-label">通讯录</label>
			</li>
			<li>
				<a class="grid-icon color-2 size32">
					<i class="icon icon-write-fill size32"></i>
				</a>
				<label class="grid-label">审批</label>
			</li>
			<li>
				<a class="grid-icon color-3 size32">
					<i class="icon icon-position-fill size32"></i>
				</a>
				<label class="grid-label">定位</label>
			</li>
			<li>
				<a class="grid-icon color-4 size32">
					<i class="icon icon-gear-fill size32"></i>
				</a>
				<label class="grid-label">设置</label>
			</li>
			<li>
				<a class="grid-icon color-5 size32">
					<i class="icon icon-folder-fill size32"></i>
				</a>
				<label class="grid-label">文档</label>
			</li>
			<li>
				<a class="grid-icon color-6 size32">
					<i class="icon icon-chartpie-fill size32"></i>
				</a>
				<label class="grid-label">数据分析</label>
			</li>
		</ul>
		</div>

		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">裸图标-bordered</p>
		</div>
		<ul class="grid grid-bordered" data-col="3">
			<li>
				<a class="grid-icon color-1 size32">
					<i class="icon icon-contact-fill size32"></i>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">999</span>
				</a>
				<label class="grid-label">通讯录</label>
			</li>
			<li>
				<a class="grid-icon color-2 size32">
					<i class="icon icon-write-fill size32"></i>
				</a>
				<label class="grid-label">审批</label>
			</li>
			<li>
				<a class="grid-icon color-3 size32">
					<i class="icon icon-position-fill size32"></i>
				</a>
				<label class="grid-label">定位</label>
			</li>
			<li>
				<a class="grid-icon color-4 size32">
					<i class="icon icon-gear-fill size32"></i>
				</a>
				<label class="grid-label">设置</label>
			</li>
			<li>
				<a class="grid-icon color-5 size32">
					<i class="icon icon-folder-fill size32"></i>
				</a>
				<label class="grid-label">文档</label>
			</li>
			<li>
				<a class="grid-icon color-6 size32">
					<i class="icon icon-chartpie-fill size32"></i>
				</a>
				<label class="grid-label">数据分析</label>
			</li>
		</ul>
		</div>

		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">相册</p>
		</div>
		<ul class="grid app-grid-photo" data-col="3">
			<li>
				<a class="grid-icon" style="background-image: url(../images/1.jpg)"></a>
			</li>
			<li>
				<a class="grid-icon" style="background-image: url(../images/2.jpg)"></a>
			</li>
			<li>
				<a class="grid-icon app-grid-icon-add">
					<i class="icon icon-plus size50"></i>
				</a>
			</li>
		</ul>
		<ul class="grid app-grid-photo" data-col="3">
			<li>
				<a class="grid-icon" style="background-image: url(../images/4.jpg)">
					<span class="close"><i class="icon icon-close"></i></span>
				</a>
			</li>
			<li>
				<a class="grid-icon" style="background-image: url(../images/5.jpg)">
					<span class="close"><i class="icon icon-close"></i></span>
				</a>
			</li>
			<li>
				<a class="grid-icon app-grid-icon-add">
					<i class="icon icon-plus size50"></i>
				</a>
			</li>
		</ul>
		</div>
		<div class="group">
		<div class="sliver underline">
			<span class="peg"></span>
			<p class="sliver-title">缩略图</p>
		</div>
		<ul class="grid app-grid-thumbnail" data-col="3">
			<li>
				<a class="grid-icon">
					<img src="../images/contact.jpg"/>
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">新</span>
				</a>
				<label class="grid-label">通讯录</label>
			</li>
			<li>
				<a class="grid-icon"><img src="../images/contact.jpg"/></a>
				<label class="grid-label">树结构</label>
			</li>
			<li>
				<a class="grid-icon"><img src="../images/contact.jpg"/></a>
				<label class="grid-label">通讯录</label>
			</li>
			<li>
				<a class="grid-icon"><img src="../images/contact.jpg"/></a>
				<label class="grid-label">通讯录</label>
			</li>
		</ul>
		</div>
	</article>
    <!-- <script src="../../dist/seedsui.min.js"></script> -->
	<script>
		//定义exmobi返回
		function back(){history.go(-1);}
	</script>
</body>
</html>
